<!--
 * @Author: 刘苗
 * @Description: 
 * @Date: 2021-08-24 15:53:43
-->
<template>
  <div class="dashboard-container">
    <div class="options_container">
      <charts-option @handleClickChart="handleClickChart" />
    </div>
    <div class="view_container">
        <h3>可拖拽布局图表</h3>
      <vuedraggable animation="1000" class="view_container_wrapper">
        <transition-group name="breadcrumb">
          <div
            v-for="(item) in list"
            :key="item.id"
            @click="handleClickChartWrite(item)"
            :style="item.style || { width: '100%', height: '325px' }"
          >
            <div :id="item.id" style="width: 100%; height: 100%"></div>
          </div>
        </transition-group>
      </vuedraggable>
    </div>
    <div class="set_container">
      <component
        :is="componentName"
        :ref="componentName"
        @handleSave="handleSave"
      ></component>
    </div>
  </div>
</template>

<script>
import chartsOption from "./comps/charts-option.vue";
import lineCharts from "./comps/line-charts.vue";
import pieCharts from "./comps/pie-charts.vue";
import vuedraggable from "vuedraggable";
import _ from "lodash";

const echarts = require("echarts");
export default {
  components: {
    vuedraggable,
    chartsOption,
    lineCharts,
    pieCharts
  },
  data() {
    return {
      componentName: "",
      list: [],
    };
  },
  mounted() {},
  methods: {
    initChart() {
      this.list.forEach((el) => {
        var myChart = echarts.init(document.getElementById(el.id));
        myChart.setOption(el);
        this.$nextTick((_) => {
          myChart.resize();
        });
      });
    },
    handleClickChart(c) {
      this.componentName = c.value;
    },
    // 保存配置
    handleSave(option) {
      const isHave = this.list.find((el) => el.id === option.id);
      console.log(isHave, "isHave");
      if (isHave) {
        this.list.forEach((el) => {
          if (el.id === option.id) {
            el = option;
            console.log(el);
          }
        });
      } else {
        this.list.push(_.cloneDeep(option));
      }
      this.$nextTick(() => {
        this.initChart();
      });
      this.componentName = "";
      this.$forceUpdate();
    },
    // 回写配置
    handleClickChartWrite(item) {
      this.componentName = item.name;
      this.$nextTick(() => {
        this.$refs[item.name].option = item;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  display: flex;
  flex-direction: row;
  padding: 25px;

  .options_container {
    background: #fff;
    padding: 5px;
    width: 10%;
    border-radius: 5px;
  }
  .view_container {
    background: #fff;
    width: 70%;
    padding: 5px;
    border-radius: 5px;
    margin: 0 10px;
    overflow: hidden;
    h3{
      text-align: center;
    }
    .view_container_wrapper {
      overflow: hidden;
      span {
        overflow: hidden;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
    }
  }
  .set_container {
    padding: 5px;
    background: #fff;
    border-radius: 5px;
    width: 20%;
  }
}
</style>
